<template>
	<view class="app">
		<view class="price-box">
			<text>充值金额</text>
			<text class="price">￥{{ orderInfo.money }}</text>
		</view>

		<view class="pay-type-list">
			
			<view class="type-item b-b" @click="changePayType(6)" v-if="payInfo.type6 == 1">
				<text class="icon yticon icon-daifukuan"></text>
				<view class="con">
					<text class="tit">银行卡支付</text>
					<text>使用银行卡支付</text>
				</view>
				<label class="radio"><radio value="" color="#fa436a" :checked="payType == 6"/></label>
			</view>
			
			<view class="type-item b-b" @click="changePayType(7)" v-if="payInfo.type7 == 1">
				<text class="icon yticon icon-daifukuan"></text>
				<view class="con">
					<text class="tit">支付宝支付</text>
					<text>使用支付宝支付</text>
				</view>
				<label class="radio"><radio value="" color="#fa436a" :checked="payType == 7"/></label>
			</view>
			
			<view class="type-item b-b" @click="changePayType(8)" v-if="payInfo.type8 == 1">
				<text class="icon yticon icon-daifukuan"></text>
				<view class="con">
					<text class="tit">微信支付</text>
					<text>使用微信支付</text>
				</view>
				<label class="radio"><radio value="" color="#fa436a" :checked="payType == 8"/></label>
			</view>
			
		</view>
		<text class="pay-text" @click="navTo('/pages/order/payText')">查看服务协议</text>
		<text class="mix-btn" @click="confirm" v-show="submitshow">确认支付</text>
	</view>
<!-- 	
	<view v-else>
		<view class="alipaysubmit" v-html="formContent"></view>
	</view> -->
</template>

<script>
export default {
	data() {
		return {
			timer: null,

			token: '',
			payType: 0,
			orderid: 0,
			
			orderInfo: {
				money: 0
			},
			userInfo: {
				money: 0
			},
			payInfo: {} ,
			submitshow: false,
			
			formContent: '',
		};
	},
	onUnload() {
		clearInterval(this.timer);
		this.timer = null;
	},
	onHide() {
		clearInterval(this.timer);
		this.timer = null;
	},
	computed: {},
	onLoad(option) {
		this.token = this.$api.get('token');
		if (!this.token) {
			uni.navigateTo({
				url: '/pages/public/login'
			});
			return;
		}

		//接收传值
		console.log('option', option);
		let orderid = option.orderid;
		if (orderid && orderid != undefined) {
			//获取用户信息
			this.getUserinfo();
			//获取支付信息
			this.getpayinfo();
			//获取订单信息
			this.orderid = orderid;
			//获取订单信息
			this.getOrderInfo();
		}
	},
	methods: {
		/**
		 * 统一跳转接口,拦截未登录路由
		 * navigator标签现在默认没有转场动画，所以用view
		 */
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		//选择支付方式
		changePayType(type) {
			this.payType = type;
		},
		//获取支付信息
		async getpayinfo() {
			const param = {
				token: this.token
			};
			await this.$http.request('Order', 'paytype', 'GET', param, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.payInfo = res.data.data;
					}
				}
			});
		},
		//获取订单信息
		getOrderInfo() {
			const param = {
				token: this.token,
				id: this.orderid
			};
			
			this.timer = setInterval(() => {
				this.$http.request('User', 'rechargedetail', 'GET', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							this.orderInfo = res.data.data;
							this.submitshow = true;

							let _this = this;
							if (res.data.data.paystatus != 0) {
								uni.navigateTo({
									url: '/pages/order/paySuccess',
									success: function(res) {
										clearInterval(_this.timer);
										_this.timer = null;
									}
								});
							}
							
						}
					}
				});
			}, 1000);
		},
		//获取用户信息
		async getUserinfo() {
			const param_userinfo = {
				token: this.token
			};
			await this.$http.request('User', 'userinfo', 'GET', param_userinfo, res => {
				if (res.status == 1) {
					if (res.data.error == 0) {
						this.userInfo = res.data.data;
					}
				}
			});
		},
		//确认支付
		confirm: async function() {
			/* 数据验证模块*/
			if (!this.orderInfo.money || this.orderInfo.money <= 0) {
				this.$helper.toast('订单金额错误', '', '/static/toast/fail-circle.png');
				return;
			}
			
			
			if (this.payType == 1) { //余额
				
			} else if (this.payType == 6) { //三方银行卡
				clearInterval(this.timer);
				this.timer = null;
				
				let orderid = this.orderid;
				if (orderid && orderid != undefined) {
					uni.navigateTo({
						url: `/pages/order/payBank?orderid=${orderid}`
					});
				}
				
			}else if (this.payType == 7) { //三方支付宝
				clearInterval(this.timer);
				this.timer = null;
				
				const param = {};
				param.token = this.token;
				param.orderid = this.orderid;
				param.payType = this.payType;
				await this.$http.request('Huijupay', 'AliRecharge', 'POST', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							// #ifdef H5
							location.replace(res.data.data);
							// #endif
							// #ifdef APP
							plus.runtime.openURL(res.data.data, function(res) {
								console.log(res.data.data);
							});
							// #endif
						}
					}
				});
				
			}else if (this.payType == 8) { //三方微信
				
				clearInterval(this.timer);
				this.timer = null;
				
				const param = {};
				param.token = this.token;
				param.orderid = this.orderid;
				param.payType = this.payType;
				await this.$http.request('Huijupay', 'WxRecharge', 'POST', param, res => {
					if (res.status == 1) {
						if (res.data.error == 0) {
							// #ifdef H5
							location.replace(res.data.data);
							// #endif
							// #ifdef APP
							plus.runtime.openURL(res.data.data, function(res) {
								console.log(res.data.data);
							});
							// #endif
						}
					}
				});
				
			}else{
				clearInterval(this.timer);
				this.timer = null;
				
				this.$helper.toast('选择支付方式', '', '/static/toast/fail-circle.png');
				return;
			}
		}
	}
};
</script>

<style lang="scss">
.app {
	width: 100%;
}

.price-box {
	background-color: #fff;
	height: 265upx;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-size: 28upx;
	color: #909399;

	.price {
		font-size: 50upx;
		color: #303133;
		margin-top: 12upx;
	}
}

.pay-type-list {
	margin-top: 20upx;
	background-color: #fff;
	padding-left: 60upx;

	.type-item {
		height: 120upx;
		padding: 20upx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-right: 60upx;
		font-size: 30upx;
		position: relative;
	}

	.icon {
		width: 100upx;
		font-size: 52upx;
	}
	.icon-erjiye-yucunkuan {
		color: #fe8e2e;
	}
	.icon-weixinzhifu {
		color: #36cb59;
	}
	.icon-alipay {
		color: #01aaef;
	}
	.tit {
		font-size: $font-lg;
		color: $font-color-dark;
		margin-bottom: 4upx;
	}
	.con {
		flex: 1;
		display: flex;
		flex-direction: column;
		font-size: $font-sm;
		color: $font-color-light;
	}
}
.pay-text {
	padding: 0 60upx;
	height: 100upx;
	line-height: 100upx;
	font-size: $font-sm + 2upx;
	color: $font-color-spec;
}
.mix-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 630upx;
	height: 80upx;
	margin: 30upx auto 30upx;
	font-size: $font-lg;
	color: #fff;
	background-color: $base-color;
	border-radius: 10upx;
	box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>
